<!DOCTYPE html>
<html >
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<title>统计分析</title>
		<script src="../../script/mui.min.js"></script>
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../../css/base.css">
		<link rel="stylesheet" href="../../css/timecontrol.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css"/>
		<style type="text/css" media="screen">
			.pie1 {
				height: 20rem;
			}
			.pie2 {
				height: 21rem;
			}
			html body {
				background: #FFFFFF;
			}
			.menu li {
				float: left; /* 往左浮动 */
				line-height: 44px;
				margin: 0 4px;
				list-style: none;
				font-size: 0.8rem;
			}
			.selectDiv {
				height: 2.5rem;
			}
			.selectDiv li {
				line-height: 44px;
				margin: 0 4px;
				list-style: none;
				font-size: 0.8rem
			}
			.titleDiv {
				height: 44px;
			}
			.menu {
				margin-left: 12px
			}
			input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select, textarea {
				padding: 10px 8px;
			}
			li input {
				margin-right: 5px;
				background: #fff url('') no-repeat 98% center;
			}
			.menu li span {
				color: red
			}
		</style>
	</head>
	<body>
		<div class="titleDiv " >
			<ul class="menu" style="margin-left: 10px">
				<li >
					<span style="color: black;">学习中:</span>
					<span id="studying_num">0</span>
				</li>
				<li>
					<span style="color: black;">已学完:</span>
					<span id="studyed_num">0</span>
				</li>
				<li>
					<span style="color: black;">已考试:</span>
					<span id="tested_num">0</span>
				</li>
			</ul>
		</div>
		<div class="interval"></div>
		<div>
			<ul class="selectDiv">
				<li style="float: right;" id="id="starttime"">
					<input id="user_birthday" class="base_content_font base_dark_grey font12" type="text" value=""  data-options=''  style="width: 6rem;padding-left: 14px;height: 2rem"  readonly/>
				</li>
			</ul>
		</div>
		<div class="pie1" id="pie1"></div>
		<div class="interval"></div>
		<div class="titleDiv">
			<ul class="menu">
				<li>
					<span style="color: black;">我的团队平均分:</span>
					<span id="myteam_score">0</span>
				</li>
			</ul>
		</div>
		<div class="titleDiv">
			<ul class="menu">
				<li>
					<span style="color: black;">学霸赛平均分:</span>
					<span id="zscore_score">0</span>
				</li>
			</ul>
		</div>
		<div class="interval"></div>
		<div class="pie2" id="pie2"></div>
		<div class="noSign"   id="noData"  hidden="hidden">
			<img src="../../image/icon_img.png" width="60%">
			<p class="font16 top_15 base_dark_grey" >
				暂无数据
			</p>
		</div>
		<div class="loadFailure" hidden="hidden" id="noNet">
			<img src="../../image/icon_img01.png" width="60%">
			<p class="" >
				数据加载失败
			</p>
			<p>
				请检查您的网络
			</p>
			<button type="button" class="mui-btn mui-btn-outlined" onclick="RefreshData()">
				重新加载
			</button>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script src="../../script/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="../../script/MD5.js"></script>
	<script type="text/javascript" src="../../script/requestTool.js"></script>
	<script type="text/javascript" src="../../script/echarts.min.js"></script>
	<script src="../../script/mui.min.js"></script>
	<script src="../../script/common.js"></script>
	<script type="text/javascript" src="../../script/mui.picker.min.js"></script>
	<script src="../../script/timeStampTool.js"></script>
	<script>
		//		var timeString = '';
		apiready = function() {
		    //开始加载
			showProgress();
			//初始化数据
			InitializationData();
			//时间选择
			setupMuiDatePicker();
		}
		
		
		function InitializationData(){
		     var timestamp2 = parseInt(currentDateTime() / 1000);
			var user_birthdayVal = timeWithStamp2(timestamp2.toString());
			$('#user_birthday').val(user_birthdayVal);
			//初始化显示当前日期数据
			loadData(timestamp2);
		}
		function setupMuiDatePicker() {
			var fullYear = new Date().getFullYear() + 4;
			var year = new Date().getFullYear();
			var month = 10;
			var day = 16;
			var end_month = new Date().getMonth() + 1;
			var end_day = new Date().getDate();
			$('#user_birthday').attr('data-options', '{"type":"date","beginYear":' + year + ',"endYear":' + year + ',"beginMonth":' + month + ',"beginDay":' + day + ',"endMonth":' + end_month + ',"endDay":' + end_day + '}');
			(function($mui) {
				$("#user_birthday").click(function() {
					var optionsJson = this.getAttribute('data-options') || '{}';
					var options = JSON.parse(optionsJson);
					var picker = new $mui.DtPicker(options);
					picker.show(function(rs) {
						$('#user_birthday').val(timeWithStamp2(timeStamp13WithString(rs.text)));
						//						alert(timeWithStamp2(timeStamp10WithString(rs.text)));
						loadData(timeStamp10WithString(rs.text));
						picker.dispose();
					});
				});
			})(mui);
		}

		function loadData(str) {
			var param = {
//								uid : 144264,
				uid : $api.getStorage('cfnetppuid'),
				//				cid : 13196,
				cid : api.pageParam.cid,
				time : str,
			};
//						var url_getxuebarecord1 = 'http://base.cfnet.org.cn/index.php/course/teacher_course_manage/getxuebarecord';
			cfnetppPOST(url_getxuebarecord, param, true, function(data, status) {
//								popu(param)
//								popu(data)
				hideProgress();
				if (status == 'success') {
					if (data.code == 200) {
						var list = data.data;
						if (list != '') {
							preData(list);
						} else {
							if (page == 1) {
								$('#noData').show();
							} else {
								api.toast({
									msg : '暂无更多数据',
									duration : 2000,
									location : 'bottom'
								});
							}
						}
					} else {
						if (page == 1) {
							$('#titleDiv').html('');
							$('#noData').show();
						}
					}
				} else {
				$('#titleDiv').html('');
					$('#noNet').show();
				}
			});
		}
		
//		function foroneArr(arr){
//			for(var i=0; i<arr.length; i++){
//			 if(arr[0].status!=0){
//			   var arr1= {
//              "status": "0",
//              "curriculum_id": 13179,
//              "peoplecount": 0
//              }
//			 
//			  arr.splice(0, 0, arr1); 
//			 }else if(arr[1].status!=1){
//			 var arr2= {
//              "status": "1",
//              "curriculum_id": 13179,
//              "peoplecount": 0
//              }
//			 arr.splice(1, 0, arr2); 
//			 }else if(arr[arr.length-1].status!=2){
//			 var arr3= {
//              "status": "2",
//              "curriculum_id": 13179,
//              "peoplecount": 0
//              }
//			 arr.splice(2, 0, arr3); 
//			
//			}
//			
//			}
//			return arr
//		}

		function preData(data) {
			setupChart2(data.num)
			setupChart1(data.sj)
			var studying_num = ''
			var studyed_num = ''
			var tested_num = ''
			var zscore_score = '';
			var myteam_score = '';
			if (data.xuex != '[]' && data.xuex.length != 0) {
			var DataArr=data.xuex;
			
			
				studying_num = isNullString2(DataArr[0]['1']);
				studyed_num = isNullString2(DataArr[1]['2']);
				tested_num = isNullString2(DataArr[2]['3']);
				$('#studying_num').html(studying_num + '<em style="color: black;margin-left: 2px">人</em>');
				$('#studyed_num').html(studyed_num + '<em style="color: black;margin-left: 2px">人</em>');
				$('#tested_num').html(tested_num + '<em style="color: black;margin-left: 2px">人</em>');
			} else {
				$('#studying_num').html('0' + '<em style="color: black;margin-left: 2px">人</em>');
				$('#studyed_num').html('0' + '<em style="color: black;margin-left: 2px">人</em>');
				$('#tested_num').html('0' + '<em style="color: black;margin-left: 2px">人</em>');
			}
			if (data.pjun != '[]' && data.pjun.length != 0) {
				zscore_score = isNullString2(data.pjun[0].zongchengjipingjun);
				myteam_score = isNullString2(data.pjun[0].pingjun);
				$('#zscore_score').html(zscore_score + '<em style="color: black;margin-left: 2px">分</em>');
				$('#myteam_score').html(myteam_score + '<em style="color: black;margin-left: 2px">分</em>');
			} else {
				$('#zscore_score').html('0' + '<em style="color: black;margin-left: 2px">分</em>');
				$('#myteam_score').html('0' + '<em style="color: black;margin-left: 2px">分</em>');
			}
		}

		function setupChart1(dataArr) {
			var myChart = echarts.init(document.getElementById('pie1'));
			var data = new Array();
			var timeArr = new Array();
			for (var j = 0; j < dataArr.length; j++) {
				timeArr.push(dataArr[j].hours)
				data.push(parseInt(dataArr[j].sum))
			}
			//option
			var option1 = {
				backgroundColor : '#FFFFFF',
				title : {
					text : '各时段学习人数',
					x : 'center',
					top : '2',
					textStyle : {
						color : 'black'
					}
				},
				tooltip : {
					trigger : 'axis'
				},
				xAxis : {
					name : '时间',
					splitLine : {
						show : false
					},
					type : 'category',
					boundaryGap : false,
					data : timeArr,
					nameGap:5
				},
				yAxis : {
					name : '人数',
					splitLine : {
						show : false
					},
					type : 'value'
					//					boundaryGap:true
				},
				grid : {
					left : '15%'
				},
				series : [{
					name : '参加学生人数',
					type : 'line',
					symbol : '',
					symbolSize : 5,
					data : data,
					label : {
						normal : {
							show : false,
							position : 'top'//值显示
						}
					},
				}]
			};
			var option = option1;
			myChart.setOption(option);
		}

		function setupChart2(dataArr) {
			var myChart = echarts.init(document.getElementById('pie2'));
			var DataArr = new Array();
			var data = [{
				value : dataArr.wu,
				name : '60分以下',
				itemStyle : {
					normal : {
						color : '#F57C4E',
					},
				},
			}, {
				value : dataArr.liu,
				name : '60-70分',
				itemStyle : {
					normal : {
						color : '#118AB2',
					},
				},
			}, {
				value : dataArr.qi,
				name : '70-80分',
				itemStyle : {
					normal : {
						color : '#ECAE53',
					},
				}
			}, {
				value : dataArr.ba,
				name : '80分以上',
				itemStyle : {
					normal : {
						color : '#4EE99C',
					},
				}
			}];
			var option1 = {
				backgroundColor : '#FFFFFF',
				title : {
					text : '考试成绩分布图',
					x : 'center',
					top : '10',
					textStyle : {
						color : 'black'
					}
				},
				legend : {
					orient : 'horizontal',
					right : '20',
					top : '40',
					selectedMode : false,
					borderRadius : 4,
					itemWidth : 12,
					itemHeight : 12,
					data : ['60分以下', '60-70分', '70-80分', '80分以上'],
					pageTextStyle : {
						color : '#F57C4E'
					}
				},
				tooltip : {
					trigger : 'item',
					formatter : "{a} <br/>{b} : {c}人 ({d}%)",
					confine : true,
					position : ['20%', '50%']
				},
				series : [{
//					name : '人数',
					type : 'pie',
					radius : ['40%', '55%'],
					center : ['50%', '55%'],
//										avoidLabelOverlap : false,
					stillShowZeroSum : false,
					data : data,
					label : {
						normal : {
//														position : 'inner'
						}
					},
					labelLine : {
						normal : {
							show : true,
							length : 10,
							length2 : 20
						}
					},
				}]
			};
			//			var opt = option1.series[0];
			//			lineHide(opt);
			var option = option1;
			myChart.setOption(option);
		}

		//数据为零时隐藏线段
		//		function lineHide(opt) {
		//			$.each(opt.data, function(i, item) {
		//				if (item.value == 0) {
		//					item.itemStyle.normal.labelLine.show = false;
		//					item.itemStyle.emphasis.labelLine.show = false;
		//					item.itemStyle.normal.label.show = false;
		//				}
		//			});
		//		}
	</script>
</html>